import React, { useEffect, useState } from 'react';
import { Row, Col, Descriptions, Avatar, Card, Button, Divider } from 'antd'
import { history, connect } from 'umi';
import PromoterList from './components/promoterList';
import CustomerList from './components/customerList';
import BindAdminSet from '@/components/bindAdminSet'
import ShareUserList from '@/pages/MarketingModule/Promoter/components/CardProps/components/Customer/components/shareUserList'
import PromoterCommission from '@/pages/MarketingModule/Promoter/components/CardProps/components/PromoterCommission/components/PromoterPerformanceList'
import PromoterPerformance from '@/pages/MarketingModule/Promoter/components/CardProps/components/PromoterPerformance/components/PromoterPerformanceList'
import CashWithdrawal from '@/pages/MarketingModule/Promoter/components/CardProps/components/CashWithdrawal'

const Promoter = (props) => {
    const { dispatch, history } = props
    const { location } = history
    const { query } = location
    const { id, type } = query
    const [data, setData] = useState({})
    const [value, setValue] = useState('customerList');
    const { Meta } = Card;
    const fetchPromoterData = () => {
        dispatch({
            type: 'promoter/fetchPromoterDetail',
            payload: {
                promoterId: id
            },

            callback: (e) => {
                const { promoterDetail = {} } = e
                setData(promoterDetail)
            }
        })

    }
    useEffect(() => {
        if (type === 'bind') {
            setValue('bindAdminSet')
        }
        fetchPromoterData()
    }, [])
    const { mobile, profile, username, applyUsername } = data
    const formItems = [
        {
            label: '申请手机',
            name: 'applyMobile',
        },
        {
            label: '邀请客户总数',
            name: 'inviteUserAmount',
        },
        {
            label: '邀请推广员总数',
            name: 'invitePromoterAmount',
        },
        {
            label: '邀请人',
            name: 'parentUsername',
        },
        {
            label: '申请时间',
            name: 'createTime',
        },
        {
            label: '级别',
            name: 'levelName',
        },
        {
            label: '分享商品数量',
            name: 'shareGoodsAmount',
        },
        {
            label: '分享素材数量',
            name: 'shareMaterialAmount',
        },
        {
            label: '银行卡号',
            name: 'bankCard',
        },
        {
            label: '银行名称',
            name: 'bankName',
        },
        {
            label: ' 银行户名',
            name: 'bankAccount',
        },


    ];
    const selectList = [
        { tab: '关联客户列表', key: 'customerList' },
        { tab: '邀请推广员列表', key: 'promoterList' },
        {
            tab: `绑定员工设置`,
            key: 'bindAdminSet',
        },
        { tab: '邀请用户列表', key: 'shareUserList' },
        { tab: '推广员佣金', key: 'promoterCommission' },
        { tab: '推广员业绩', key: 'promoterPerformance' },
        { tab: '提现记录', key: 'cashWithdrawal' },
    ];
    const content = {
        customerList: <CustomerList data={data} promoterId={id}></CustomerList>,
        promoterList: <PromoterList parentId={id}></PromoterList>,
        bindAdminSet: <BindAdminSet initialValues={data} id={id}></BindAdminSet>,
        shareUserList: <ShareUserList></ShareUserList>,
        promoterCommission: <PromoterCommission></PromoterCommission>,
        promoterPerformance: <PromoterPerformance></PromoterPerformance>,
        cashWithdrawal: <CashWithdrawal></CashWithdrawal>,
    }[value]
    const DescriptionsItem = (item, data) => {
        const { render, label, name, span = 1 } = item
        if (render) {
            return <Descriptions.Item span={span} label={<div style={{}}>{label}</div>}>{render(data[name], data)}</Descriptions.Item>
        }
        else {
            return <Descriptions.Item span={span} label={<div style={{}}>{label}</div>}>{data[name]}</Descriptions.Item>
        }
    }
    return <Card
        extra={<Button type='link' onClick={() => { history.goBack() }}>返回列表</Button>}
        title='推广员详情'>
        <Meta
            avatar={<Avatar src={profile} />}
            title={<div>
                {applyUsername}
            </div>}
        />
        <Divider />
        <Descriptions column={3}>
            {formItems.filter(item => {
                const { show = true } = item
                return show
            }).map((item, index) => {
                return <React.Fragment key={index}>{DescriptionsItem(item, data)}</React.Fragment>
            })}
        </Descriptions>
        <Card
            bordered={false}
            tabList={selectList}
            activeTabKey={value}
            onTabChange={(key) => {
                setValue(key);
            }}>
            {content}
        </Card>
    </Card>
}

export default connect(({ loading }) => ({
    loading: loading.models.promoter,
}))(Promoter);
